<template>
  <view class="edit-profile">
    <view class="form">
      <view class="form-item">
        <text class="label">头像</text>
        <button 
          class="avatar-wrapper"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image class="avatar" :src="form.avatarTempPath || getAvatarUrl(form.avatar)" mode="aspectFill"></image>
        </button>
      </view>
      
      <view class="form-item">
        <text class="label">昵称</text>
        <input 
          type="nickname"
          v-model="form.nickName"
          placeholder="请输入昵称"
          class="input"
          @blur="onNicknameBlur"
        />
      </view>
      
      <view class="form-item">
        <text class="label">手机号</text>
        <input 
          type="number"
          v-model="form.mobile"
          placeholder="请输入手机号"
          class="input"
        />
      </view>
    </view>
    
    <button class="submit-btn" form-type="submit" @tap="handleSubmit">保存</button>
  </view>
</template>

<script>
import { updateUserInfo, getUserInfo, updateUserRichInfo } from '@/api/user'
import config from '@/config'
import { getAvatarUrl } from '@/utils/image'

export default {
  data() {
    return {
      form: {
        avatar: '',
        nickName: '',
        mobile: '',
        avatarTempPath: null  // 临时头像路径
      },
      defaultAvatarUrl: '/static/default-avatar.png',
      shouldReturn: true
    }
  },
  
  onLoad(options) {
    this.loadUserInfo()
    if (options.stay === 'true') {
      this.shouldReturn = false
    }
  },
  
  methods: {
    getAvatarUrl(url) {
      return getAvatarUrl(url)
    },
    
    async loadUserInfo() {
      try {
        const { data } = await getUserInfo()
        this.form = {
          avatar: data.avatar,
          nickName: data.nickName,
          mobile: data.mobile,
          avatarTempPath: null
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }
    },
    
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail 
      console.log('选择的头像临时路径:', avatarUrl)
      this.form.avatarTempPath = avatarUrl
      this.form.avatar = avatarUrl // 用于显示
    },
    
    onNicknameBlur() {
      if (!this.form.nickName) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        })
      }
    },
    
    async handleSubmit() {
      try {
        // 检查必填项
        if (!this.form.nickName) {
          uni.showToast({
            title: '请输入昵称',
            icon: 'none'
          })
          return
        }
        
        uni.showLoading({
          title: '保存中...'
        })
        
        try {
          const { data: userInfo } = await getUserInfo()
          console.log('获取到当前用户信息:', userInfo.userId)
          
          let result;
          
          // 检查是否有临时头像
          if (this.form.avatarTempPath && 
              (this.form.avatarTempPath.startsWith('wxfile://') || 
               this.form.avatarTempPath.startsWith('http://tmp'))) {
            
            console.log('检测到新头像，转换为base64并提交更新')
            
            // 使用新方法更新用户信息和头像
            result = await this.updateUserInfoWithFile(
              userInfo.userId,
              this.form.nickName || '',
              this.form.mobile || '',
              this.form.avatarTempPath
            )
          } else {
            // 没有新头像，只更新基本信息
            console.log('没有新头像，只更新基本信息')
            
            const updateParams = {
              nickName: this.form.nickName || '',
              mobile: this.form.mobile || ''
            }
            
            // 如果有现有的头像URL，也传递
            if (this.form.avatar) {
              updateParams.avatar = this.form.avatar
            }
            
            // 更新用户信息
            result = await updateUserRichInfo(userInfo.userId, updateParams)
          }
          
          console.log('更新用户信息响应:', result)
          
          // 更新成功后，重新获取最新的用户信息
          const { data: newUserInfo } = await getUserInfo()
          console.log('获取到新的用户信息:', newUserInfo)
          
          // 更新本地存储和Vuex store
          try {
            // 确保newUserInfo是对象
            if (newUserInfo && typeof newUserInfo === 'object') {
              const userInfoStr = JSON.stringify(newUserInfo)
              uni.setStorageSync('userInfo', userInfoStr)
              this.$store.commit('SET_USER_INFO', newUserInfo)
              console.log('用户信息已更新')
            } else {
              throw new Error('无效的用户信息格式')
            }
          } catch (error) {
            console.error('保存用户信息失败:', error)
          }
          
          // 成功处理
          uni.hideLoading()
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          
          // 等待1.5秒后返回
          setTimeout(() => {
            if (this.shouldReturn) {
              const pages = getCurrentPages()
              
              if (pages.length > 1) {
                const prevPage = pages[pages.length - 2]
                if (prevPage.route !== 'pages/login/login') {
                  uni.navigateBack()
                } else {
                  uni.switchTab({ url: '/pages/index/index' })
                }
              } else {
                uni.switchTab({ url: '/pages/index/index' })
              }
            }
          }, 1500)
        } catch (error) {
          console.error('保存个人信息失败:', error)
          uni.hideLoading()
          uni.showToast({
            title: error.message || '保存失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('操作失败:', error)
        uni.hideLoading()
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none'
        })
      }
    },
    
    // 使用updateUserRichInfo更新用户信息
    updateUserInfoWithFile(userId, nickName, mobile, tempFilePath) {
      return new Promise((resolve, reject) => {
        console.log('开始更新用户信息和头像:', {
          userId,
          nickName,
          mobile,
          hasFile: !!tempFilePath
        })
        
        // 先将临时文件转为base64
        uni.getFileSystemManager().readFile({
          filePath: tempFilePath,
          encoding: 'base64',
          success: (res) => {
            // 使用updateUserRichInfo更新用户信息
            updateUserRichInfo(userId, {
              nickName: nickName,
              mobile: mobile,
              base64Avatar: res.data // 传递base64编码的头像数据
            }).then(result => {
              console.log('更新用户信息响应:', result)
              resolve(result)
            }).catch(err => {
              console.error('更新用户信息失败:', err)
              reject(err)
            })
          },
          fail: (err) => {
            console.error('读取文件失败:', err)
            reject(new Error('读取文件失败'))
          }
        })
      })
    }
  }
}
</script>

<style>
.edit-profile {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input {
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.avatar-wrapper {
  text-align: center;
  padding: 0;
  width: 160rpx !important;
  height: 160rpx !important;
  border-radius: 50%;
  margin: 0 auto;
  background: none;
}

.avatar-wrapper::after {
  border: none;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.submit-btn {
  margin-top: 60rpx;
  background: #3a8838;
  color: #fff;
  border-radius: 45rpx;
  height: 90rpx;
  line-height: 90rpx;
}
</style> 